<template>
  <div class="gray-page exam-page">
    <nav-bar title="我的考试" theme="blue" message></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.type" @click="getList(1)">
          <van-tab title="模拟考试" name="0"></van-tab>
          <van-tab title="在线考试" name="1"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky :offset-top="88">
        <van-search
          v-model="searchForm.title"
          placeholder="请输入您要搜索的内容"
          background="#F6F6F6"
          :left-icon="searchLeftIcon"
          clearable
          @search="getList(1)"
        />
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="124">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <div class="van-clearfix">
                <div class="float-item" v-for="(item, index) in listData" :key="index">
                  <p class="float-item-title">{{ item.title }}</p>
                  <p class="float-item-time">交卷时间：{{ item.submitTime }}</p>
                  <p class="float-item-time">我的分数：{{ item.score }}分</p>
                  <van-tag type="primary" @click="toAnswer(item)">答案查看</van-tag>
                </div>
              </div>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import List from '@/mixins/list'
import LearnTest from '@/api/learnTest'
export default {
  mixins: [List],
  data() {
    return {
      searchLeftIcon: require('@/assets/images/basic/searchbar_search@2x.png'),
      searchForm: {
        type: '0',
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      api: LearnTest.MyExam
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    toAnswer(item) {
      this.$router.push({
        path: '/learnTest/my/exam/answer',
        query: { code: item.code }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/learnTest/exam/index.less';
</style>
